import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { NavBar, Radio } from 'antd-mobile';

function Index() {
  const nav = useNavigate();
  const [currentStep, setCurrentStep] = useState(1); // 1: 基本信息, 2: 入院审核
  const [formData, setFormData] = useState({
    patientName: '',
    age: ' ',
    gender: '男',
    birthDate: '2020/01/01',
    idNumber: '',
    medicalCardNumber: '',
    phoneNumber: '',
    nationality: '',
    ethnicity: '',
    currentAddress: '',
    currentAddressDetail: '',
    householdAddress: '',
    householdAddressDetail: '',
    contactName: '',
    contactPhone: '',
    contactRelationship: '',
    contactAddress: '',
    contactAddressDetail: ''
  });

  const handleBack = () => {
   nav(-1)
  };

//   const handleMoreOptions = () => {
//     console.log('更多选项');
//   };

//   const handleTarget = () => {
//     console.log('目标功能');
//   };

  const handleInputChange = (field: string, value: string) => {
    setFormData(prev => ({
      ...prev,
      [field]: value
    }));
  };

  const handleSubmit = () => {
    console.log('提交申请:', formData);
    // 切换到入院审核步骤
    setCurrentStep(2);
  };

  const handleGoToPrepayment = () => {
    console.log('去预交金');
    // 这里可以跳转到预交金页面
    nav('/zhu2');
  };

  const handleStepClick = (step: number) => {
    setCurrentStep(step);
  };

  return (
    <div style={{ width: '100vw', minHeight: '100vh', background: '#fff' }}>
      {/* 顶部导航栏 */}
      <NavBar
        onBack={handleBack}
       
      >
        入院登记
      </NavBar>

      {/* 进度指示器 */}
      <div style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        padding: '20px 16px',
        background: '#fff'
      }}>
        <div 
          style={{ 
            display: 'flex', 
            alignItems: 'center',
            cursor: 'pointer'
          }}
          onClick={() => handleStepClick(1)}
        >
          <div style={{
            width: '24px',
            height: '24px',
            borderRadius: '50%',
            background: currentStep === 1 ? '#1677ff' : '#d9d9d9',
            color: currentStep === 1 ? '#fff' : '#999',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            fontSize: '14px',
            fontWeight: 600,
            transition: 'all 0.3s ease'
          }}>
            1
          </div>
          <div style={{
            fontSize: '14px',
            color: currentStep === 1 ? '#1677ff' : '#999',
            marginLeft: '8px',
            fontWeight: currentStep === 1 ? 500 : 400,
            transition: 'all 0.3s ease'
          }}>
            基本信息
          </div>
        </div>
        
        <div style={{
          width: '40px',
          height: '2px',
          background: '#d9d9d9',
          margin: '0 16px'
        }} />
        
        <div 
          style={{ 
            display: 'flex', 
            alignItems: 'center',
            cursor: 'pointer'
          }}
          onClick={() => handleStepClick(2)}
        >
          <div style={{
            width: '24px',
            height: '24px',
            borderRadius: '50%',
            background: currentStep === 2 ? '#1677ff' : '#d9d9d9',
            color: currentStep === 2 ? '#fff' : '#999',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            fontSize: '14px',
            fontWeight: 600,
            transition: 'all 0.3s ease'
          }}>
            2
          </div>
          <div style={{
            fontSize: '14px',
            color: currentStep === 2 ? '#1677ff' : '#999',
            marginLeft: '8px',
            fontWeight: currentStep === 2 ? 500 : 400,
            transition: 'all 0.3s ease'
          }}>
            入院审核
          </div>
        </div>
      </div>

      {/* 根据当前步骤显示不同内容 */}
      {currentStep === 1 ? (
        <>
          {/* 表单标题 */}
          <div style={{
            padding: '16px',
            background: '#fff',
            fontSize: '16px',
            fontWeight: 600,
            color: '#333'
          }}>
            请完善以下基本信息
          </div>

      {/* 表单内容 */}
      <div style={{ padding: '0 16px', paddingBottom: '100px' }}>
        {/* 患者基本信息 */}
        <div style={{
          background: '#fff',
          borderRadius: '8px',
          padding: '16px',
          marginBottom: '16px'
        }}>
          <div style={{
            fontSize: '16px',
            fontWeight: 600,
            color: '#333',
            marginBottom: '16px'
          }}>
            患者基本信息
          </div>

          {/* 患者姓名 */}
          <div style={{ marginBottom: '16px' }}>
            <div style={{
              fontSize: '14px',
              color: '#333',
              marginBottom: '8px'
            }}>
              患者姓名<span style={{ color: '#ff4d4f' }}>*</span>
            </div>
            <input
              type="text"
              placeholder="请输入姓名"
              value={formData.patientName}
              onChange={(e) => handleInputChange('patientName', e.target.value)}
              style={{
                width: '100%',
                padding: '12px',
                border: '1px solid #d9d9d9',
                borderRadius: '4px',
                fontSize: '14px',
                outline: 'none'
              }}
            />
          </div>

          {/* 年龄 */}
          <div style={{ marginBottom: '16px' }}>
            <div style={{
              fontSize: '14px',
              color: '#333',
              marginBottom: '8px'
            }}>
              年龄<span style={{ color: '#ff4d4f' }}>*</span>
            </div>
            <input
              type="text"
              placeholder="请输入年龄"
              value={formData.age}
              onChange={(e) => handleInputChange('age', e.target.value)}
              style={{
                width: '100%',
                padding: '12px',
                border: '1px solid #d9d9d9',
                borderRadius: '4px',
                fontSize: '14px',
                outline: 'none'
              }}
            />
          </div>

          {/* 性别 */}
          <div style={{ marginBottom: '16px' }}>
            <div style={{
              fontSize: '14px',
              color: '#333',
              marginBottom: '8px'
            }}>
              性别<span style={{ color: '#ff4d4f' }}>*</span>
            </div>
            <Radio.Group
              value={formData.gender}
              onChange={(val) => handleInputChange('gender', val as string)}
            >
              <div style={{ display: 'flex', gap: '24px' }}>
                <Radio value="男">男</Radio>
                <Radio value="女">女</Radio>
              </div>
            </Radio.Group>
          </div>

          {/* 出生日期 */}
          <div style={{ marginBottom: '16px' }}>
            <div style={{
              fontSize: '14px',
              color: '#333',
              marginBottom: '8px'
            }}>
              出生日期<span style={{ color: '#ff4d4f' }}>*</span>
            </div>
            <div style={{
              display: 'flex',
              alignItems: 'center',
              padding: '12px',
              border: '1px solid #d9d9d9',
              borderRadius: '4px',
              background: '#fff'
            }}>
              <span style={{ flex: 1, fontSize: '14px', color: '#333' }}>
                {formData.birthDate}
              </span>
              <span style={{ fontSize: '16px', color: '#999' }}>📅</span>
            </div>
          </div>

          {/* 身份证号 */}
          <div style={{ marginBottom: '16px' }}>
            <div style={{
              fontSize: '14px',
              color: '#333',
              marginBottom: '8px'
            }}>
              身份证号<span style={{ color: '#ff4d4f' }}>*</span>
            </div>
            <input
              type="text"
              placeholder="请输入身份证号"
              value={formData.idNumber}
              onChange={(e) => handleInputChange('idNumber', e.target.value)}
              style={{
                width: '100%',
                padding: '12px',
                border: '1px solid #d9d9d9',
                borderRadius: '4px',
                fontSize: '14px',
                outline: 'none'
              }}
            />
          </div>

          {/* 就诊卡号 */}
          <div style={{ marginBottom: '16px' }}>
            <div style={{
              fontSize: '14px',
              color: '#333',
              marginBottom: '8px'
            }}>
              就诊卡号<span style={{ color: '#ff4d4f' }}>*</span>
            </div>
            <input
              type="text"
              placeholder="请输入就诊卡号"
              value={formData.medicalCardNumber}
              onChange={(e) => handleInputChange('medicalCardNumber', e.target.value)}
              style={{
                width: '100%',
                padding: '12px',
                border: '1px solid #d9d9d9',
                borderRadius: '4px',
                fontSize: '14px',
                outline: 'none'
              }}
            />
          </div>

          {/* 本人电话 */}
          <div style={{ marginBottom: '16px' }}>
            <div style={{
              fontSize: '14px',
              color: '#333',
              marginBottom: '8px'
            }}>
              本人电话<span style={{ color: '#ff4d4f' }}>*</span>
            </div>
            <input
              type="text"
              placeholder="请输入本人联系电话"
              value={formData.phoneNumber}
              onChange={(e) => handleInputChange('phoneNumber', e.target.value)}
              style={{
                width: '100%',
                padding: '12px',
                border: '1px solid #d9d9d9',
                borderRadius: '4px',
                fontSize: '14px',
                outline: 'none'
              }}
            />
          </div>

          {/* 国籍 */}
          <div style={{ marginBottom: '16px' }}>
            <div style={{
              fontSize: '14px',
              color: '#333',
              marginBottom: '8px'
            }}>
              国籍
            </div>
            <div style={{
              display: 'flex',
              alignItems: 'center',
              padding: '12px',
              border: '1px solid #d9d9d9',
              borderRadius: '4px',
              background: '#fff'
            }}>
              <span style={{ flex: 1, fontSize: '14px', color: formData.nationality ? '#333' : '#999' }}>
                {formData.nationality || '请选择国籍'}
              </span>
              <span style={{ fontSize: '14px', color: '#999' }}>›</span>
            </div>
          </div>

          {/* 民族 */}
          <div style={{ marginBottom: '16px' }}>
            <div style={{
              fontSize: '14px',
              color: '#333',
              marginBottom: '8px'
            }}>
              民族
            </div>
            <div style={{
              display: 'flex',
              alignItems: 'center',
              padding: '12px',
              border: '1px solid #d9d9d9',
              borderRadius: '4px',
              background: '#fff'
            }}>
              <span style={{ flex: 1, fontSize: '14px', color: formData.ethnicity ? '#333' : '#999' }}>
                {formData.ethnicity || '请选择民族'}
              </span>
              <span style={{ fontSize: '14px', color: '#999' }}>›</span>
            </div>
          </div>

          {/* 现住址 */}
          <div style={{ marginBottom: '16px' }}>
            <div style={{
              fontSize: '14px',
              color: '#333',
              marginBottom: '8px'
            }}>
              现住址<span style={{ color: '#ff4d4f' }}>*</span>
            </div>
            <div style={{
              display: 'flex',
              alignItems: 'center',
              padding: '12px',
              border: '1px solid #d9d9d9',
              borderRadius: '4px',
              background: '#fff'
            }}>
              <span style={{ flex: 1, fontSize: '14px', color: formData.currentAddress ? '#333' : '#999' }}>
                {formData.currentAddress || '请选择现居住地址'}
              </span>
              <span style={{ fontSize: '14px', color: '#999' }}>›</span>
            </div>
          </div>

          {/* 现住址详情 */}
          <div style={{ marginBottom: '16px' }}>
            <div style={{
              fontSize: '14px',
              color: '#333',
              marginBottom: '8px'
            }}>
              现住址详情<span style={{ color: '#ff4d4f' }}>*</span>
            </div>
            <input
              type="text"
              placeholder="请输入现住址详情,精确到门牌号"
              value={formData.currentAddressDetail}
              onChange={(e) => handleInputChange('currentAddressDetail', e.target.value)}
              style={{
                width: '100%',
                padding: '12px',
                border: '1px solid #d9d9d9',
                borderRadius: '4px',
                fontSize: '14px',
                outline: 'none'
              }}
            />
          </div>

          {/* 户口地址 */}
          <div style={{ marginBottom: '16px' }}>
            <div style={{
              fontSize: '14px',
              color: '#333',
              marginBottom: '8px'
            }}>
              户口地址
            </div>
            <div style={{
              display: 'flex',
              alignItems: 'center',
              padding: '12px',
              border: '1px solid #d9d9d9',
              borderRadius: '4px',
              background: '#fff'
            }}>
              <span style={{ flex: 1, fontSize: '14px', color: formData.householdAddress ? '#333' : '#999' }}>
                {formData.householdAddress || '请选择现户口地址'}
              </span>
              <span style={{ fontSize: '14px', color: '#999' }}>›</span>
            </div>
          </div>

          {/* 户口地址详情 */}
          <div style={{ marginBottom: '16px' }}>
            <div style={{
              fontSize: '14px',
              color: '#333',
              marginBottom: '8px'
            }}>
              户口地址详情
            </div>
            <input
              type="text"
              placeholder="请输入户口住址详情,精确到门牌"
              value={formData.householdAddressDetail}
              onChange={(e) => handleInputChange('householdAddressDetail', e.target.value)}
              style={{
                width: '100%',
                padding: '12px',
                border: '1px solid #d9d9d9',
                borderRadius: '4px',
                fontSize: '14px',
                outline: 'none'
              }}
            />
          </div>
        </div>

        {/* 联系人信息 */}
        <div style={{
          background: '#fff',
          borderRadius: '8px',
          padding: '16px',
          marginBottom: '16px'
        }}>
          <div style={{
            fontSize: '16px',
            fontWeight: 600,
            color: '#333',
            marginBottom: '16px'
          }}>
            联系人信息
          </div>

          {/* 联系人姓名 */}
          <div style={{ marginBottom: '16px' }}>
            <div style={{
              fontSize: '14px',
              color: '#333',
              marginBottom: '8px'
            }}>
              联系人姓名<span style={{ color: '#ff4d4f' }}>*</span>
            </div>
            <input
              type="text"
              placeholder="请输入联系人姓名"
              value={formData.contactName}
              onChange={(e) => handleInputChange('contactName', e.target.value)}
              style={{
                width: '100%',
                padding: '12px',
                border: '1px solid #d9d9d9',
                borderRadius: '4px',
                fontSize: '14px',
                outline: 'none'
              }}
            />
          </div>

          {/* 联系人电话 */}
          <div style={{ marginBottom: '16px' }}>
            <div style={{
              fontSize: '14px',
              color: '#333',
              marginBottom: '8px'
            }}>
              联系人电话<span style={{ color: '#ff4d4f' }}>*</span>
            </div>
            <input
              type="text"
              placeholder="请输入联系人电话"
              value={formData.contactPhone}
              onChange={(e) => handleInputChange('contactPhone', e.target.value)}
              style={{
                width: '100%',
                padding: '12px',
                border: '1px solid #d9d9d9',
                borderRadius: '4px',
                fontSize: '14px',
                outline: 'none'
              }}
            />
          </div>

          {/* 联系人关系 */}
          <div style={{ marginBottom: '16px' }}>
            <div style={{
              fontSize: '14px',
              color: '#333',
              marginBottom: '8px'
            }}>
              联系人关系
            </div>
            <div style={{
              display: 'flex',
              alignItems: 'center',
              padding: '12px',
              border: '1px solid #d9d9d9',
              borderRadius: '4px',
              background: '#fff'
            }}>
              <span style={{ flex: 1, fontSize: '14px', color: formData.contactRelationship ? '#333' : '#999' }}>
                {formData.contactRelationship || '请选择联系人与患者关系'}
              </span>
              <span style={{ fontSize: '14px', color: '#999' }}>›</span>
            </div>
          </div>

          {/* 联系人地址 */}
          <div style={{ marginBottom: '16px' }}>
            <div style={{
              fontSize: '14px',
              color: '#333',
              marginBottom: '8px'
            }}>
              联系人地址
            </div>
            <div style={{
              display: 'flex',
              alignItems: 'center',
              padding: '12px',
              border: '1px solid #d9d9d9',
              borderRadius: '4px',
              background: '#fff'
            }}>
              <span style={{ flex: 1, fontSize: '14px', color: formData.contactAddress ? '#333' : '#999' }}>
                {formData.contactAddress || '请选择联系人地址'}
              </span>
              <span style={{ fontSize: '14px', color: '#999' }}>›</span>
            </div>
          </div>

          {/* 联系人地址详情 */}
          <div style={{ marginBottom: '16px' }}>
            <div style={{
              fontSize: '14px',
              color: '#333',
              marginBottom: '8px'
            }}>
              联系人地址详情
            </div>
            <input
              type="text"
              placeholder="请输入联系人住址详情,精确到门"
              value={formData.contactAddressDetail}
              onChange={(e) => handleInputChange('contactAddressDetail', e.target.value)}
              style={{
                width: '100%',
                padding: '12px',
                border: '1px solid #d9d9d9',
                borderRadius: '4px',
                fontSize: '14px',
                outline: 'none'
              }}
            />
          </div>
        </div>
      </div>

          {/* 底部提交按钮 */}
          <div style={{
            position: 'fixed',
            bottom: 0,
            left: 0,
            right: 0,
            padding: '16px',
            background: '#fff',
            borderTop: '1px solid #f0f0f0'
          }}>
            <button
              onClick={handleSubmit}
              style={{
                width: '100%',
                background: '#1677ff',
                color: '#fff',
                border: 'none',
                borderRadius: '8px',
                padding: '16px',
                fontSize: '16px',
                fontWeight: 600,
                cursor: 'pointer'
              }}
            >
              提交申请
            </button>
          </div>
        </>
      ) : (
        <>
          {/* 入院审核通过状态 */}
          <div style={{
            margin: '16px',
            background: '#e6f7ff',
            borderRadius: '8px',
            padding: '16px',
            display: 'flex',
            alignItems: 'flex-start',
            gap: '12px'
          }}>
            <div style={{
              width: '24px',
              height: '24px',
              borderRadius: '50%',
              background: '#52c41a',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              flexShrink: 0
            }}>
              <span style={{ color: '#fff', fontSize: '14px' }}>✓</span>
            </div>
            <div style={{ flex: 1 }}>
              <div style={{
                fontSize: '16px',
                fontWeight: 600,
                color: '#1890ff',
                marginBottom: '8px'
              }}>
                入院审核通过
              </div>
              <div style={{
                fontSize: '14px',
                color: '#1890ff',
                lineHeight: '1.5'
              }}>
                您的入院审核通过,当前暂无床位,请先完成预交充值,有床位时医院人员将电话通知您。
              </div>
            </div>
          </div>

          {/* 住院人信息 */}
          <div style={{
            margin: '0 16px 16px',
            background: '#fff',
            borderRadius: '8px',
            padding: '16px'
          }}>
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
              marginBottom: '16px'
            }}>
              <div style={{
                fontSize: '16px',
                fontWeight: 600,
                color: '#333'
              }}>
                住院人信息
              </div>
              <div style={{
                fontSize: '12px',
                color: '#999',
                background: '#f5f5f5',
                padding: '4px 8px',
                borderRadius: '4px'
              }}>
                已登记
              </div>
            </div>

            <div style={{ lineHeight: '1.8' }}>
              <div style={{ fontSize: '16px', color: '#333', marginBottom: '8px' }}>
                王小柯 女 25岁 
              </div>
              <div style={{ fontSize: '14px', color: '#666', marginBottom: '4px' }}>
                住院号: 2020010105
              </div>
              <div style={{ fontSize: '14px', color: '#666', marginBottom: '4px' }}>
                入院病区: 内一科病区
              </div>
              <div style={{ fontSize: '14px', color: '#666', marginBottom: '4px' }}>
                住院医生: 刘医生
              </div>
              <div style={{ fontSize: '14px', color: '#666', marginBottom: '4px' }}>
                床位号: 暂未签床
              </div>
              <div style={{ fontSize: '14px', color: '#666', marginBottom: '4px' }}>
                审核时间: 2020-01-01 15:20:20
              </div>
              <div style={{ fontSize: '14px', color: '#666' }}>
                入院诊断: 肺部阴影
              </div>
            </div>
          </div>

          {/* 底部按钮组 */}
          <div style={{
            position: 'fixed',
            bottom: 0,
            left: 0,
            right: 0,
            padding: '16px',
            background: '#fff',
            borderTop: '1px solid #f0f0f0'
          }}>
            <div style={{
              display: 'flex',
              gap: '12px'
            }}>
              {/* <button
                onClick={() => handleStepClick(1)}
                style={{
                  flex: 1,
                  background: '#f5f5f5',
                  color: '#333',
                  border: '1px solid #d9d9d9',
                  borderRadius: '8px',
                  padding: '16px',
                  fontSize: '16px',
                  fontWeight: 600,
                  cursor: 'pointer'
                }}
              >
                返回修改
              </button> */}
              <button
                onClick={handleGoToPrepayment}
                style={{
                  flex: 1,
                  background: '#1677ff',
                  color: '#fff',
                  border: 'none',
                  borderRadius: '8px',
                  padding: '16px',
                  fontSize: '16px',
                  fontWeight: 600,
                  cursor: 'pointer'
                }}
              >
                去预交金
              </button>
            </div>
          </div>
        </>
      )}
    </div>
  );
}

export default Index;
